<template>
  <div class="text">
    <div ref="nav" class="my-nav">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" ref="nav1">关于我</el-menu-item>
      <el-menu-item index="2" ref="nav2">人生经历</el-menu-item>
      <el-menu-item index="3" ref="nav3">项目经验</el-menu-item>
      <el-menu-item index="4" ref="nav4">技术储备</el-menu-item>
    </el-menu>
    </div>
    <div class="my-introduce" ref="introduce"><h2>关于我</h2><hr>
    <div class="my-introduce-home" ref="fade1">
      <div><i class="el-icon-s-custom"></i><h3>学历</h3><p>大专</p></div>
      <div><i class="el-icon-s-goods"></i><h3>院校</h3><p>罗职院</p></div>
      <div><i class="el-icon-notebook-1"></i><h3>专业</h3><p>计算机应用技术</p></div>
      <div><i class="el-icon-s-promotion"></i><h3>联系方式</h3><p>761735976@qq.com</p></div>
    </div>
    </div>
    <div class="my-experience" ref="experience"><h2>人生经历</h2><hr>
    <div class="my-experience-text" ref="fade2">
      <ul>
        <li><div class="ex-data"><h6>2018/07</h6><h6>-</h6><h6>现今</h6></div>
        <div class="ex-textw"><h4>盈商科技</h4><p>网站管理,设计修改网站</p><p>小程序开发，测试，上线</p><p>后台上传模块设计</p></div></li>
        <li><div class="ex-data"><h6>2015/09</h6><h6>-</h6><h6>2018/6</h6></div>
        <div class="ex-texts"><h4>罗职院</h4><p>计算机应用专业</p><p>参加年级网页设计比赛获得排名</p><p>获得优秀毕业生</p></div></li>
      </ul>
    </div>
    </div>
    <div class="my-projecte" ref="projecte"><h2>项目经验</h2><hr>
    <div class="my-project-text" ref="fade3">
     <div class="my-project-text-d">
       <div class="project-text-a"><img src="../assets/xm1.jpg"><div class="project-text-r"><h3>小程序</h3><p>小程序开发，测试，上线</p></div></div></div>
       <div class="my-project-text-d">
         <div class="project-text-a"><img src="../assets/xm2.jpg"><div class="project-text-r"><h3>商城网站</h3><p>使用thinkPHP框架,包括上传后台</p></div></div></div>
       <div class="my-project-text-d">
         <div class="project-text-a"><img src="../assets/xm3.jpg"><div class="project-text-r"><h3>多文件上传</h3><p>thinkPHP框架上传，包括模板</p></div></div></div>
       <div class="my-project-text-d">
         <div class="project-text-a"><img src="../assets/xm4.jpg"><div class="project-text-r"><h3>个人博客</h3><p>使用VUE-element框架</p></div></div></div>
       <div class="my-project-text-d">
         <div class="project-text-a"><img src="../assets/xm5.jpg"><div class="project-text-r"><h3>网站后台</h3><p>thinkphp后台+VUE-element前端</p></div></div></div>
       <div class="my-project-text-d">
         <div class="project-text-a"><img src="../assets/xm6.jpg"><div class="project-text-r"><h3>更新中</h3><p>待续》》》</p></div></div></div>
    </div>
    </div>
    <div class="my-technology" ref="technology"><h2>技术储备</h2><hr>
    <div class="my-technology-text" ref="fade4">
      <div class="my-technology-text-one">
      <div class="my-technology-r"><el-progress type="circle" :percentage="valueH" color="rgb(151, 190, 13)" :stroke-width="10"></el-progress><h3>HTML</h3></div>
      <div class="my-technology-r"><el-progress type="circle" :percentage="valueC" color="rgb(192, 146, 125)" :stroke-width="10"></el-progress><h3>CSS</h3></div>
      <div class="my-technology-r"><el-progress type="circle" :percentage="valueJ" color="rgb(153, 172, 185)" :stroke-width="10"></el-progress><h3>JS</h3></div>
      </div>
      <div class="my-technology-two" ref="technologytwo">
        <div class="my-t-ex">
          <div class="my-cdul"><h3>JQruey: </h3></div>
          <div class="my-cdu"><div class="my-bfb"><span>70%</span></div></div>
        </div>
        <div class="my-t-ex">
          <div class="my-cdul"><h3>VUE: </h3></div>
          <div class="my-cdu"><div class="my-bfb"><span>75%</span></div></div>
          </div>
        <div class="my-t-ex"><div class="my-cdul"><h3>Bootstrap: </h3></div><div class="my-cdu"><div class="my-bfb"><span>70%</span></div></div></div>
        <div class="my-t-ex"><div class="my-cdul"><h3>PHP: </h3></div><div class="my-cdu"><div class="my-bfb"><span>68%</span></div></div></div>
        <div><div id="SOHUCS" ></div></div>
      </div>
    </div>
    </div>
    <div><h4>粤ICP备2020125493号-1</h4></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      valueH: 0,
      valueC: 0,
      valueJ: 0,
      scroll: 0,
      windowh: 0,
      ss: 0,
      ss2: 0
    }
  },
  mounted () {
    // window.addEventListener('scroll', this.throttle(this.handleScroll, 500, 100))
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    scrlltorequestAnimationFrame (hei) {
      var scrllhei = this.scroll
      if (scrllhei > hei) {
        window.requestAnimationFrame(this.scrlltorequestAnimationFrame(hei))
        window.scrollTo(0, scrllhei - scrllhei / 10)
      }
    },
    scrllto (hei) {
      // var i = 10
      // var scrllhei = this.scroll
      window.scrollTo({
        top: hei,
        behavior: 'smooth'
      })
    },
    handleSelect (key, keyPath) {
      switch (key) {
        case '1':
          console.log('1111')
          var introduce = this.$refs.introduce.offsetTop
          if (this.scroll < this.windowh) {
            this.scrllto(introduce - 70)
          } else {
            this.scrllto(introduce)
          }
          break
        case '2':
          var experience = this.$refs.experience.offsetTop
          if (this.scroll < this.windowh) {
            this.scrllto(experience - 70)
          } else {
            this.scrllto(experience)
          }
          break
        case '3':
          var projecte = this.$refs.projecte.offsetTop
          if (this.scroll < this.windowh) {
            this.scrllto(projecte - 70)
          } else {
            this.scrllto(projecte)
          }
          // this.scrlltorequestAnimationFrame(projecte)
          break
        case '4':
          var technology = this.$refs.technology.offsetTop
          if (this.scroll < this.windowh) {
            this.scrllto(technology - 70)
          } else {
            this.scrllto(technology)
          }
          break
      }
    },
    handleScroll () {
      var nav = this.$refs.nav.offsetTop
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      var introduces = this.$refs.introduce.offsetTop
      if (this.scroll >= nav) {
        this.$refs.nav.classList.add('flex')
      }
      if (this.scroll < introduces) {
        this.$refs.nav.classList.remove('flex')
      }
      this.windowh = document.documentElement.clientHeight || document.body.clientHeight
      var introduce = this.$refs.introduce.offsetTop - 100
      var experience = this.$refs.experience.offsetTop - 100
      var projecte = this.$refs.projecte.offsetTop - 100
      var technology = this.$refs.technology.offsetTop
      var teh = this.$refs.technology.clientHeight + technology
      if (this.scroll < introduce) {
        this.$refs.nav1.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav1.$el.style.borderBottomColor = 'transparent'
      }
      if (this.scroll >= introduce) {
        this.$refs.nav1.$el.style.color = 'rgb(255, 208, 75)'
        this.$refs.nav1.$el.style.borderBottomColor = 'rgb(255, 208, 75)'
        this.$refs.nav2.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav2.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav3.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav3.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav4.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav4.$el.style.borderBottomColor = 'transparent'
        this.$refs.fade1.classList.add('fadein')
      }
      if (this.scroll >= experience) {
        this.$refs.nav2.$el.style.color = 'rgb(255, 208, 75)'
        this.$refs.nav2.$el.style.borderBottomColor = 'rgb(255, 208, 75)'
        this.$refs.nav1.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav1.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav3.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav3.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav4.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav4.$el.style.borderBottomColor = 'transparent'
        this.$refs.fade2.classList.add('fadein')
      }
      if (this.scroll >= projecte) {
        this.$refs.nav3.$el.style.color = 'rgb(255, 208, 75)'
        this.$refs.nav3.$el.style.borderBottomColor = 'rgb(255, 208, 75)'
        this.$refs.nav2.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav2.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav1.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav1.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav4.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav4.$el.style.borderBottomColor = 'transparent'
        this.$refs.fade3.classList.add('fadein')
      }
      if ((this.scroll + this.windowh) >= teh || this.scroll >= (technology - 100)) {
        this.$refs.nav4.$el.style.color = 'rgb(255, 208, 75)'
        this.$refs.nav4.$el.style.borderBottomColor = 'rgb(255, 208, 75)'
        this.$refs.nav2.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav2.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav3.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav3.$el.style.borderBottomColor = 'transparent'
        this.$refs.nav1.$el.style.color = 'rgb(255, 255, 255)'
        this.$refs.nav1.$el.style.borderBottomColor = 'transparent'
        this.$refs.fade4.classList.add('fadein')
        this.$refs.technologytwo.classList.add('technology-twofade')
        let that = this
        setTimeout(function () {
          that.valueH = 75
          that.valueC = 80
          that.valueJ = 85
        }, 1000)
      }
      this.ss = technology + teh
      this.ss2 = this.scroll + this.windowh
    },
    throttle (func, wait, mustRun) {
      var timeout = new Date()
      var startTime = new Date()
      return function () {
        var context = this
        var args = arguments
        var curTime = new Date()
        clearTimeout(timeout)
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args)
          startTime = curTime
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait)
        }
      }
    }
  }
}
</script>

<style>
  .my-technology-text-one .my-technology-r:nth-child(1) h3, .my-technology-text-one .my-technology-r:nth-child(1) .el-progress__text{
    color: rgb(151, 190, 13);
  }
  .my-technology-text-one .my-technology-r:nth-child(2) h3, .my-technology-text-one .my-technology-r:nth-child(2) .el-progress__text{
    color: rgb(192, 146, 125);
  }
  .my-technology-text-one .my-technology-r:nth-child(3) h3, .my-technology-text-one .my-technology-r:nth-child(3) .el-progress__text{
    color: rgb(153, 172, 185);
  }
  .my-nav {
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
  }
  .flex{
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .text .el-menu-demo {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
  }
  .text div h2{
    margin-bottom: 0px;
  }
  .text div hr{
    width: 100px;
    height: 4px;
     margin-bottom: 50px;
    border: 0;
    background-color: #ffd400;
  }
  @media (max-width:767px){
    .my-technology-two{
      width: 100%;
      height: auto;
      transition: all 0.5s;
    }
    .my-technology-text{
      width: 100%;
      height: auto;
      transition: all 1s 0.2s;
    }
    .my-introduce-home{
      width: 100%;
      height: auto;
      transition: all 1s 0.2s;
    }
    .my-technology-two .my-t-ex div h3{
      font-size: 8px;
    }
    .my-project-text{
      width: 100%;
      padding-right: 10%;
      padding-left: 10%;
      box-sizing: border-box;
      height: auto;
      position: relative;
      display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: center;
      -webkit-justify-content: center;
      transition: all 1s 0.2s;
    }
    .my-project-text .my-project-text-d{
      position: relative;
      width: 50%;
      height: auto;
      box-sizing: border-box;
      padding: 10px;
      transition: all 0.3s;
    }
    .my-project-text .my-project-text-d:hover{
      padding: 10px;
    }
    .my-project-text .my-project-text-d .project-text-a{
      position: relative;
      width: 100%;
      height: 100%;
    }
    .my-project-text .my-project-text-d .project-text-a img{
      position: relative;
      display: block;
    }
    .my-project-text .my-project-text-d .project-text-a {
      position: relative;
    }
    .my-project-text-d .project-text-a::after{
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-sizing: border-box;
      z-index: 1;
      padding: 10px;
      background-color: black;
      opacity: 0.5;
      transition: all 0.3s;
    }
    .my-project-text-d:hover .project-text-a .project-text-r{
      display: block;
    }
    .project-text-r{
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 100px;
      margin-top: -50px;
      color: white;
      text-align: center;
      z-index: 2;
      display: block;
      transition: all 0.3s;
    }
    .project-text-r h3{
      margin-bottom: 0px;
    }
    .project-text-r p{
      padding-top: 0px;
      margin-top: 2px;
      font-size: 0.5em;
    }
    .my-project-text div img{
      width: 100%;
      height: 100%;
    }
    .my-experience{
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      background: url(../assets/bg4.jpg) no-repeat fixed  top center;
      background-size: 100% 100%;
      transition: all 0.5s;
    }
    .my-experience ul{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .my-experience-text{
      width: 100%;
      height: auto;
      overflow: hidden;
      transition: all 0.5s;
    }
    .my-experience ul::before{
      content: "";
      width: 2px;
      height: 95%;
      display: block;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: red;
      position: absolute;
      left: 100px;
      z-index: -1;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-bottom: 100px;
    }
    .ex-data{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 3px solid gray;
      border-radius: 50%;
      left: 100px;
      margin-left: -50px;
      background-color: white;
      transition: all 0.5s;
    }
    .ex-textw, .ex-texts{
      width: 100%;
      height: auto;
      text-align: left;
      padding-top: 100px;
      box-sizing: border-box;
      padding-left: 160px;
      transition: all 0.5s;
    }
    .ex-textw p{
     margin: 5px 0px;
    }
    .ex-texts p{
     margin: 5px 0px;
    }
    .ex-data h6{
      margin: 0;
      line-height: 33.3px;
      font-weight: bold;
    }

    .my-introduce-home{
      width: 100%;
      position: relative;
      display: flex;
      display: -webkit-flex;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      flex-wrap: wrap;
      padding-bottom: 50px;
    }
    .my-introduce-home div{
      width: 50%;
    }
    .my-introduce-home div i{
      margin-top: 20px;
      font-size: 120px;
      transition: all 0.5s;
    }
    .ex-texts p, .ex-textw p{
      font-weight: bold;
      font-size: 14px;
    }
  }
  @media (min-width:768px){
    .ex-texts p, .ex-textw p{
      font-weight: bold;
      font-size: 16px;
    }
    .my-technology-text{
      width: 100%;
      height: auto;
      transition: all 1s 0.2s;
      overflow: hidden;
    }
    .my-introduce-home{
      width: 100%;
      height: auto;
      transition: all 1s 0.2s;
    }
    .my-technology-text{
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      transition: all 0.5s;
    }
    .my-technology-text-one{
      width: 40%;
      height: auto;
      margin: 0;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .my-technology-two{
      width: 60%;
      position: relative;
      margin: 0;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .my-technology-r{
      margin: 10px;
      transition: all 0.5s;
    }
    .my-project-text{
      width: 100%;
      padding-right: 10%;
      padding-left: 10%;
      box-sizing: border-box;
      height: auto;
      position: relative;
      display: flex;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: center;
      -webkit-justify-content: center;
      transition: all 0.5s;
    }
    .my-project-text .my-project-text-d{
      position: relative;
      width: 33.3%;
      height: auto;
      box-sizing: border-box;
      padding: 30px;
      transition: all 0.3s;
    }
    .my-project-text .my-project-text-d:hover{
      padding: 20px;
    }
    .my-project-text .my-project-text-d .project-text-a{
      position: relative;
      width: 100%;
      height: 100%;
    }
    .my-project-text .my-project-text-d .project-text-a img{
      position: relative;
      display: block;
    }
    .my-project-text .my-project-text-d .project-text-a {
      position: relative;
    }
    .my-project-text-d:hover .project-text-a::after{
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-sizing: border-box;
      z-index: 1;
      padding: 30px;
      background-color: black;
      opacity: 0.5;
      transition: all 0.3s;
    }
    .my-project-text-d:hover .project-text-a .project-text-r{
      display: block;
    }
    .project-text-r{
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 100px;
      margin-top: -50px;
      color: white;
      text-align: center;
      z-index: 2;
      display: none;
      transition: all 0.3s;
    }
    .my-project-text div img{
      width: 100%;
      height: 100%;
    }
    .my-experience{
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      background: url(../assets/bg4.jpg) no-repeat fixed  top center;
      background-size: 100% 100%;
    }
    .my-experience ul{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .my-experience-text{
      width: 100%;
      height: auto;
      overflow: hidden;
      transition: all 0.5s;
    }
    .my-experience ul::before{
      content: "";
      width: 4px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 50%;
      margin-left: -1px;
      z-index: -1;
    }
    .ex-data::before{
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      border: 4px solid orange;
      border-radius: 50%;
      left: 50%;
      top: -4px;
      margin-left: -54px;
      clip: rect(0px 108px 108px 52px);
      transform: rotate(0deg);
      -ms-transform: rotate(0deg); /* IE 9 */
      -webkit-transform: rotate(0deg); /* Safari and Chrome */
      transition: all 0.5s;
    }
    .my-experience-text ul li:hover .ex-data::before{
      transform: rotate(180deg);
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Safari and Chrome */
    }
    .ex-data{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 4px solid gray;
      border-radius: 50%;
      left: 50%;
      margin-left: -50px;
      background-color: white;
      transition: all 0.5s;
    }
    .ex-textw{
      width: 50%;
      height: auto;
      text-align: right;
      box-sizing: border-box;
      padding-right: 80px;
      transition: all 0.5s;
    }
    .ex-textw p{
     margin: 5px 0px;
     transition: all 0.5s;
    }
    .ex-texts{
      width: 50%;
      height: auto;
      text-align: left;
      box-sizing: border-box;
      margin-left: 50%;
      padding-left: 80px;
      transition: all 0.5s;
    }
    .ex-texts p{
     margin: 5px 0px;
    }
    .ex-data h6{
      margin: 0;
      line-height: 33.3px;
      font-weight: bold;
    }
    .my-introduce-home{
      display: flex;
      justify-content: center;
    }
    .my-introduce-home div{
      width: 20%;
      height: auto;
      margin-top: 50px;
      margin-bottom: 50px;
      transition: all 0.5s;
    }
    .my-introduce-home div i{
      font-size: 120px;
      transition: all 0.5s;
    }
  }
  .my-introduce-home div i{
    width: 140px;
    height: 140px;
    color: white;
    border-radius: 50%;
    background-color: rgb(169, 168, 168);
    line-height: 140px;
    transition: all 0.5s;
  }
  .my-introduce-home div i:hover{
    color: #4d7fb1;
    font-size: 100px;
  }
  .my-introduce-home div h3, .my-introduce-home div p{
    margin: 0;
  }
  .my-introduce-home div h3{
    color: darkorange;
  }
  .ex-textw h4, .ex-texts h4{
    color: #FF8C00;
  }
  .my-technology-two .my-t-ex div{
    float: left;
  }
  .my-technology-two .my-t-ex{
    width: 100%;
    height: 30px;
    margin: 30px 0;
    padding-top: 20px;
    transition: all 0.5s;
  }
  .my-technology-two .my-t-ex div h3{
    width: 100%;
    line-height: 30px;
    text-align: right;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    padding-right: 20px;
    transition: all 0.5s;
  }
  .my-technology-two .my-t-ex .my-cdul{
    width: 25%;
    transition: all 0.5s;
  }
  .my-technology-two .my-t-ex .my-cdu{
    width: 70%;
    position: relative;
    height: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #aa5500;
   background: rgba(204, 204, 204, 1);
    background-size: 50px 50px;
    transition: all 0.5s;
  }
  .my-technology-two .my-t-ex:nth-child(1) .my-cdu::before{
    content: "";
    position: absolute;
    width: 0%;
    height: 26px;
    top: 0;
    left: -1.5px;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(
            45deg,
            rgba(170, 126, 163, 0.5) 0, rgba(170, 126, 163, 0.5) 25%, transparent 25%, transparent 50%,
            rgba(170, 126, 163, 0.5) 50%, rgba(170, 126, 163, 0.5) 75%, transparent 75%, transparent 100%
          );
    background-size: 50px 50px;
    animation: zs1 1s;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    -webkit-animation: zs1 1s;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
  }
  .my-technology-two .my-t-ex:nth-child(1) div h3{
    color: rgba(170, 126, 163, 0.5);
  }
  .my-technology-two .my-t-ex:nth-child(2) .my-cdu::before{
    content: "";
    position: absolute;
    width: 0%;
    height: 26px;
    top: 0;
    left: -1.5px;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(
            45deg,
            rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%,
            rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent 100%
          );
    background-size: 50px 50px;
    animation: zs2 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    -webkit-animation: zs2 1s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
  }
  .my-technology-two .my-t-ex:nth-child(2) div h3{
    color: rgba(0, 153, 68, 0.5);
  }
  .my-technology-two .my-t-ex:nth-child(3) .my-cdu::before{
    content: "";
    position: absolute;
    width: 0%;
    height: 26px;
    top: 0;
    left: -1.5px;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(
            45deg,
            rgba(108, 153, 49, 0.5) 0, rgba(108, 153, 49, 0.5) 25%, transparent 25%, transparent 50%,
            rgba(108, 153, 49, 0.5) 50%, rgba(108, 153, 49, 0.5) 75%, transparent 75%, transparent 100%
          );
    background-size: 50px 50px;
    transition: all 0.5s;
    animation: zs3 1s;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
    -webkit-animation: zs3 1s;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-fill-mode: forwards;
  }
  .my-technology-two .my-t-ex:nth-child(3) div h3{
    color: rgba(108, 153, 49, 0.5);
  }
  .my-technology-two .my-t-ex:nth-child(4) .my-cdu::before{
    content: "";
    position: absolute;
    width: 0%;
    height: 26px;
    top: 0;
    left: -1.5px;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(
            45deg,
            rgba(145, 56, 56, .6) 0, rgba(145, 56, 56, .6) 25%, transparent 25%, transparent 50%,
            rgba(145, 56, 56, .6) 50%, rgba(145, 56, 56, .6) 75%, transparent 75%, transparent 100%
          );
    background-size: 50px 50px;
    animation: zs4 1s;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;
    -webkit-animation: zs4 1s;
    -webkit-animation-delay: 3.5s;
    -webkit-animation-fill-mode: forwards;
  }
  .my-technology-two .my-t-ex:nth-child(4) div h3{
    color: rgba(145, 56, 56, .6);
  }
  .my-technology-r h3{
    margin-top: 0px;
    transition: all 0.5s;
  }
  .my-introduce-home, .my-experience-text, .my-project-text, .my-technology-text{
    max-width: 1170px;
    margin: 0 auto;
  }
  .my-introduce h2, .my-experience h2, .my-projecte h2, .my-technology h2{
    padding-top: 70px;
  }
  .my-introduce-home, .my-experience-text, .my-project-text, .my-technology-text{
    padding-bottom: 70px;
    opacity: 0;
    transform: translateY(2em);
    -webkit-transform: translateY(2em);
    transition: all 1s 0.2s;
  }
  .my-cdu:hover .my-bfb{
    opacity: 1;
  }
  .my-bfb{
    position: absolute;
    right: 5px;
    opacity: 0;
    transition: all 0.5s;
  }
  .my-bfb span{
    line-height: 30px;
  }
  .fadein{
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  .my-technology-two{
    display: none;
  }
  .technology-twofade{
    display: block;
  }
  @keyframes zs1{
    0%{
      width: 0%;
    }
    100%{
      width: 70%;
    }
  }
  @-webkit-keyframes zs1{
    0%{
      width: 0%;
    }
    100%{
      width: 70%;
    }
  }
  @keyframes zs2{
    0%{
      width: 0%;
    }
    100%{
      width: 75%;
    }
  }
  @-webkit-keyframes zs2{
    0%{
      width: 0%;
    }
    100%{
      width: 75%;
    }
  }
  @keyframes zs4{
    0%{
      width: 0%;
    }
    100%{
      width: 68%;
    }
  }
  @-webkit-keyframes zs4{
    0%{
      width: 0%;
    }
    100%{
      width: 68%;
    }
  }
  @keyframes zs3{
    0%{
      width: 0%;
    }
    100%{
      width: 70%;
    }
  }
  @-webkit-keyframes zs3{
    0%{
      width: 0%;
    }
    100%{
      width: 70%;
    }
  }
</style>
